<template>
    <div>
        <h2>发布公告</h2>
        <form @submit.prevent="submitNotice">
            <div>
                <label for="title">标题：</label>
                <input type="text" id="title" v-model="title" required>
            </div>
            <div>
                <label for="content">内容：</label>
                <textarea id="content" v-model="content" rows="5" required></textarea>
            </div>
            <div>
                <button type="submit">发布</button>
            </div>
        </form>
        <button type="button" @click="showOldAcont">查看往期公告</button>
        <div v-if="showPastNotices">
            <h2>往期公告</h2>
            <el-table :data="list" size="small">
                <el-table-column prop="title" label="标题"></el-table-column>
                <el-table-column prop="text" label="内容"></el-table-column>
                <el-table-column prop="createTime" label="日期"></el-table-column>
                <el-table-column prop="sysName" label="发布人"></el-table-column>
                <el-table-column label="操作" #default="scope">
                    <el-button type="primary" size="small" @click="deleteNotice(scope.row.id)">删除</el-button>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.limit"
                           :page-sizes="[5, 10, 20, 50, 100]" @size-change="fetchData" @current-change="fetchData"
                           layout="total, sizes, prev, pager, next" :total="total"/>
        </div>
    </div>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {DeleteNotice, GetAllNotice, PostNotice} from "@/api/announcement";
import {useAccount} from "@/pinia/modules/account";

const userInfo = useAccount().userinfo;
const title = ref('');
const content = ref('');
const submitNotice = async () => {
    const {code} = await PostNotice({
        title: title.value,
        text: content.value,
        sysId: userInfo.id,
        sysName: userInfo.username
    });
    if (code === 200) {
        ElMessage.success('发布成功');
        // 清空表单
        title.value = '';
        content.value = '';
    } else
        ElMessage.error('发布失败');
}
const showPastNotices = ref(false)

const showOldAcont = () => {
    showPastNotices.value = true
    fetchData()
}
// 分页条总记录数
let total = ref(0)
// 定义表格数据模型
let list = ref([]) // 成绩数据，需从后端获取
//分页数据
const pageParamsForm = {
    page: 1, // 页码
    limit: 10, // 每页记录数
}
const pageParams = ref(pageParamsForm) // 将pageParamsForm包装成支持响应式的对象

const fetchData = async () => {
    const {data} = await GetAllNotice(
        pageParams.value.page,
        pageParams.value.limit
    )
    list.value = data.list
    total.value = data.total
}
const deleteNotice = async (id) => {
    const {code} = await DeleteNotice(id)
    if (code === 200) {
        ElMessage.success('删除成功');
        await fetchData()
    } else
        ElMessage.error('删除失败');
}

</script>

<style scoped>
/* 样式可以根据实际需要进行调整 */
form {
    margin-top: 20px;
}

label {
    display: inline-block;
    width: 80px;
}

input[type="text"],
textarea {
    width: 300px;
}

button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}


</style>
